<template>
  <div class="user-info">
    <a-modal
      wrap-class-name="modal-wrap-container"
      :title="passwordModel.title"
      :visible="passwordModel.visible"
      v-bind="modalProps"
      :confirm-loading="passwordModel.confirmLoading"
      width="32%"
      @ok="modalSubmit(passwordModel)"
      @cancel="modalCancel(passwordModel)"
    >
      <ChangePassword :ref="passwordModel.ref" />
    </a-modal>
    <div class="left-container">
      <div class="title">你好，{{ currentUser.username }}，祝你开心每一天！</div>
      <div class="position">{{ currentUser.position | position }}</div>
      <div />
    </div>

    <div class="right-container">
      <div class="m">{{ currentUser.mobile }}</div>
      <div class="e">{{ currentUser.email }}</div>

      <div class="operation-container">
        <a class="edit" @click.prevent="handlerModifyInfo">编辑个人信息</a>
        <a @click.prevent="handlerModifyPWD">修改密码</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ChangePassword from './modal/ChangePassword'
import modal from './modal'

export default {
  mixins: [modal],

  components: {
    ChangePassword,
  },

  filters: {
    position(value) {
      return value.toString();
    }
  },

  computed: {
    ...mapGetters(['currentUser']),
  },

  methods: {
    // 编辑个人信息
    handlerModifyInfo () {
      this.$router.push({ path: '/index/account' })
    },

    // 修改密码
    handlerModifyPWD () {
      this.passwordModel.visible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  justify-content: space-between;

  .left-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 22px;
      font-weight: bold;
    }

    .position {
      color: $gray-11;
    }
  }

  .right-container {
    color: $gray-11;

    line-height: 2em;
    .operation-container {
      .edit {
        margin-right: $margin-lg;
      }
    }
  }
}
</style>
